<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>{$title}</title>

    <!-- Bootstrap -->
    <!--<link href="/static/index/css/bootstrap.min.css" rel="stylesheet">-->
    {load href="/static/index/css/bootstrap.min.css"}
    {css href="/static/index/reset.css"}
    {css href="/static/index/css/toastr.min.css"}
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-12 bg-primary p20">
            <h1>{$title}</h1>
            <hr>
            <a href="{:url('rest/user/index')}" class="btn btn-default">用户列表页面</a>
            <a href="{:url('rest/user/create')}" class="btn btn-default">添加页面</a>
        </div>
    </div>

    <div class="clearfix"></div>
{block name="main"}
    <div class="row mt50">
        <div class="col-md-6">
            <table class="table table-hover bg-info">
                <tr>
                    <th>ID</th>
                    <th>NAME</th>
                    <th>ACTION</th>
                </tr>

                {volist name="list" id="v" key="k" mod="2"}
                {eq name="mod" value="0"}
                <tr>
                    <td>{$v['id']}</td>
                    <td>{$v['name']}</td>
                    <td class="col-md-6">
                        <a href="{:url('rest/user/readpage', ['id'=>$v['id']])}" class="btn btn-xs btn-default">查看信息(页)</a>
                        <button class="btn btn-default btn-xs show-btn" data-toggle="modal" data-target="#myModal"
                                data-id="{$v['id']}">查看信息(框)
                        </button>


                        <a href="{:url('rest/user/edit', ['id'=>$v['id']])}" class="btn btn-xs btn-primary">编辑</a>

                        <button class="btn btn-xs btn-danger del-btn" data-id="{$v['id']}">删除</button>
                    </td>
                </tr>
                {/eq}
                {/volist}

            </table>
        </div>
        <div class="col-md-6">
            <table class="table table-hover bg-info">
                <tr>
                    <th>ID</th>
                    <th>NAME</th>
                    <th>ACTION</th>
                </tr>

                {volist name="list" id="v" key="k" mod="2"}
                {eq name="mod" value="1"}
                <tr>
                    <td>{$v['id']}</td>
                    <td>{$v['name']}</td>
                    <td class="col-md-6">
                        <a href="{:url('rest/user/readpage', ['id'=>$v['id']])}" class="btn btn-xs btn-default">查看信息(页)</a>
                        <button class="btn btn-default btn-xs show-btn" data-toggle="modal" data-target="#myModal"
                                data-id="{$v['id']}">查看信息(框)
                        </button>

                        <a href="{:url('rest/user/edit', ['id'=>$v['id']])}" class="btn btn-xs btn-primary">编辑</a>

                        <button class="btn btn-xs btn-danger del-btn" data-id="{$v['id']}">删除</button>
                    </td>
                </tr>
                {/eq}
                {/volist}

            </table>
        </div>
    </div>
</div>


<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">用户 [<u></u>] 的信息</h4>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-3">
                        <img src="/static/index/face/batman.jpg" width="100">
                    </div>
                    <div class="col-md-9">
                        <h3></h3>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-info" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

{/block}

<!-- jQuery + Bootstrap -->
{js href="/static/index/js/jquery.min.js"}
{js href="/static/index/js/bootstrap.min.js"}
{js href="/static/index/js/toastr.min.js"}

{block name="myjs"}
<script>
    $(function () {
        // 触发 删除用户
        $('.del-btn').click(function () {
            var ac_id = $(this).attr('data-id');
            console.log('删除操作,ID为:', ac_id);

            if (confirm('您确定要 [ 删除 ] 该用户么?')) {
                var obj = $(this).parents('tr');
                // console.log(obj);
                delAjax(ac_id, obj);  // 执行AJAX删除
            }
        });

        // 触发 AJAX查询用户
        $('.show-btn').click(function () {
            var ac_id = $(this).attr('data-id');
            console.log('查询操作,ID为:', ac_id);
            showAjax(ac_id);  // 执行AJAX查询
        });

    });

    // 设置弹框参数
    toastr.options = {
        closeButton: true,//是否显示关闭按钮
        progressBar: true,//实现显示计时条
        timeOut: "3000",//自动关闭时间
        positionClass: "toast-bottom-left"//提示位置
        // positionClass: "toast-top-full-width"//提示位置
        // toast-top-full-width 顶端，宽度铺满整个屏幕
        // toast-top-right  顶端右边
    };


    // 执行AJAX删除
    function delAjax(id, obj) {
        $.ajax({
            type: 'delete',
            url: '/users/' + id,
            dataType: 'json',
            success: function (data) {
                console.log(data);

                if (data.status) {
                    toastr.success(data.info);
                    // 移除tr节点
                    obj.remove();
                } else {
                    toastr.error(data.info, 'FBI WARNING: ')
                }

            },
            error: function () {
                alert('AJAX 执行失败!');
            }
        });
    }

    // 执行AJAX查询
    function showAjax(id) {
        $.ajax({
            type: 'get',
            url: '/users/' + id,
            dataType: 'json',
            success: function (data) {
                console.log(data);

                if (data.status) {
                    $('.modal-title u').html(data.title);
                    $('.modal-body h3').html(data.datas.id+ data.datas.name + data.datas.province);
                } else {
                    $('.modal-title u').html(data.title);
                    $('.modal-body h3').html(data.datas);
                }

            },
            error: function () {
                alert('AJAX 执行失败!');
            }
        });
    }

</script>
{/block}


</body>
</html>